
<template>
  <div class="app-container">
    <div class="top-container">
      工艺名称:{{ title }}

      <el-button type="primary" style="float:right;" @click="addOne">添加</el-button>
    </div>
    <table-list
      show-index
      :columns="columns"
      :page-size="listQuery.pageSize"
      :page-num="listQuery.currPage"
      :data="list"
      :total="total"
      @currentChange="handlePageChange"
    />
    <add-new-step ref="cpAddNewStep" @addSuccess="search" />
  </div>
</template>

<script>
import tableList from '@/components/table/tableList.vue'
import addNewStep from './components/addNewStep.vue'
import { qpcrparaProvider, qpcrprogProvider } from '@/api/api'

export default {
  name: 'ProcessStep',
  components: {
    tableList, addNewStep
  },
  data() {
    return {
      listQuery: {
        currPage: 1,
        pageSize: 15,
        name: ''
      },
      id: '',
      total: 1,
      columns: [
        { text: '功能', value: 'func', formatter: (val) => {
          return this.funcMap[val.func]
        } },
        { text: '温度(℃)', value: 'tempBottom' },
        { text: '时间(s)', value: 'time' },
        { text: '跳转至', value: 'jump' },
        { text: '循环次数', value: 'loop' },
        { text: '步增温度', value: 'tempStep' },
        { text: '结束温度', value: 'tempMax' },
        { text: '操作', type: 'textButton', width: 150, list: this.operButton }
      ],
      list: [],
      funcMap: {
        1: '正常控温',
        2: '荧光采集',
        3: '熔解功能'
      },
      title: ''
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.getList()
    qpcrprogProvider.get({ id: this.id }).then(res => {
      if (res.code === 0) {
        this.title = res.data.name
      }
    })
  },
  methods: {
    search() {
      this.listQuery.currPage = 1
      this.getList()
    },
    getList() {
      qpcrparaProvider.list({ progId: this.id }).then(res => {
        if (res.code === 0) {
          this.list = res.data
        }
      })
    },
    addOne() {
      this.$refs.cpAddNewStep.init()
    },
    updateOne(val) {
      console.log(val.row, 'update one')
      this.$refs.cpAddNewStep.init(true, val.row)
    },
    deleteOne(val) {
      // console.log(val.row, 'delete one')
      this.$confirm('是否确定删除该记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        qpcrparaProvider.deleteById({ id: val.row.id }).then((res) => {
          if (res.code === 0) {
            this.getList()
          }
        })
      })
    },
    operButton() {
      return [
        { value: '编辑', click: this.updateOne },
        { value: '删除', click: this.deleteOne }
      ]
    },
    handlePageChange(val) {
      this.listQuery.currPage = val
    }
  }
}
</script>

<style lang="scss" scoped>
  .top-container{
    width: 100%;
    height: 36px;
    display: block;
    margin-bottom: 20px;
    font-size: 18px;
  }
</style>
